<template>
  <div class="home-container">

    <div class="body">

      <div class="chart">
        <Chart></Chart>
<!--        <Chart2></Chart2>-->
      </div>

      <!--零基础课程-->
      <div class="base-course">
        <BaseCourse></BaseCourse>
      </div>

      <!--最近学过-->
      <div class="recent-learn" v-if="isLogin">
        <RecentLearn></RecentLearn>
      </div>

      <!--热门课程-->
      <div class="hot-course">
        <HotCourse></HotCourse>
      </div>

      <div class="blog-rank">
        <div class="blog">
          <TodayBlog></TodayBlog>
        </div>
        <div class="rank">
          <LanguageRank></LanguageRank>
        </div>
      </div>

      <!--系统固定-->
      <div class="fix">
<!--        <Sys></Sys>-->
      </div>
    </div>

    <div style="height:40px">

    </div>

    <!-- 页脚 -->
    <div class="footer">
      <Footer></Footer>
    </div>
  </div>
</template>

<script>
import Sys from "@/components/home/Sys"
import Footer from "@/components/home/Footer"
//轮播图
import Chart from "@/components/home/Chart"
import Chart2 from "@/components/home/Chart2"
//
import Website from "@/components/home/Website"
//推荐
import Recommend from "@/components/home/Recommend"
//编程排行
import LanguageRank from "@/components/home/LanguageRank"
//今日练习题
import TodayExercises from "@/components/home/TodayExercises"
//热点博客
import TodayBlog from "@/components/home/TodayBlog"
//零基础入门
import BaseCourse from "@/components/home/BaseCourse"
//最近学过
import RecentLearn from "@/components/home/RecentLearn"
//热门课程
import HotCourse from "@/components/home/HotCourse"



export default {
  //组件名称
  name: "Home",
  //组件注册
  components: {
    Chart, Chart2,
    Website,Recommend,LanguageRank,
    TodayExercises, TodayBlog,
    BaseCourse,RecentLearn,HotCourse,
    Sys, Footer
  },
  //数据驱动
  data() {
    return {
    }
  },
  //计算属性
  computed: {
    isLogin(){
      return this.$store.getters.getIsLogin
    }
  },
  //数据监听
  watch: {},
  //方法
  methods: {},
  //钩子函数
  created() {

  },
  mounted() {
    window.scrollTo(0, 0)
  }
}
</script>

<style lang="less">
@header-height: 70px;
.home-container {
  background-color: #EFEFEF;
  display: flex;
  flex-direction: column;

  /*固定*/
  .fix {
    position: fixed;
    left: 0;
    bottom: 0;
  }
  /*零基础入门*/
  .base-course{
    margin-top: 40px;
  }
  /*最近学过*/
  .recent-learn{
    margin-top: 40px;
  }
  /*热门课程*/
  .hot-course{
    margin-top: 40px;
  }
  .blog-rank{
    min-width: 1200px;
    width: 1200px;
    margin: 40px auto 0 auto;
    display: flex;
    justify-content: space-between;
    .blog{
      background-color: #FFF;
      border-radius: 6px;
      width:50%;
      margin-left: 3%;
    }
    .rank{
      background-color: #FFF;
      border-radius: 6px;
      width:40%;
      margin-right: 3%;
    }
  }
}
</style>